<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/detail.css">

</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">逻辑博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="blog_user.html">用户中心</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/defaultUser.jpg" alt="">
                <h3></h3>
                <a href="#">GitHub 地址</a>
                <div class="row">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="row">
                    <span class="articleCount"></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="content">
                <div class="title"></div>
                <div class="info">
                    <span class="lastTime">最后修改时间:</span>
                    <span class="date"></span>
                    <span class="view">阅览数:</span>
                    <span class="viewCount"></span>
                    <span class="like">点赞数:</span>
                    <span class="likeCount"></span>
                    <span class="isliked"></span>
                </div>
                <div class="detail" id="detail" style="background-color: transparent;">

                </div>
                <div class="commentList">

                </div>

                <!-- <div class="operating">
                    <button onclick="window.location.href='blog_update.html'">编辑</button>
                    <button onclick="deleteBlog()">删除</button>
                </div> -->
            </div>

        </div>
    </div>

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/lib/marked.min.js"></script>
    <script src="blog-editormd/lib/prettify.min.js"></script>
    <script src="blog-editormd/editormd.js"></script>
    <script src="js/common.js"></script>
    <script>
        $.ajax({
            url: "/blog/getBlogDetail" + location.search,
            type: "get",
            success: function (result) {
                var blog = result.data;
                getAuthorArticleCounts(blog);
                editormd.markdownToHTML("detail", {
                    markdown: blog.content,
                });
                if (result.code == 200 && result.data != null) {
                    localStorage.setItem("blog_id", blog.id);
                    $(".right .content .title").text(blog.title);
                    $(".right .content .info .date").text(blog.updateTime);
                    $(".right .content .info .viewCount").text(blog.viewCount);
                    $(".right .content .info .likeCount").text(blog.likeCount);
                    // $(".right .content .detail").text(blog.content);
                    $.ajax({
                        url: "/like/isliked" + location.search,
                        type: "get",
                        success: function (result) {
                            if (result.code == 200 && result.data != null) {
                                var isliked = result.data;
                                if (blog.isLoginUser) {
                                    var html = "";
                                    html += '<div class="operating">';
                                    html += '<button onclick="window.location.href=\'blog_update.html' + location.search + '\'">编辑</button>';
                                    html += '<button onclick="deleteBlog()">删除</button>';
                                    if (isliked) {
                                        $(".right .content .info .isliked").text("您已点赞");
                                        html += '<button id="like" onclick="cancellike()">取消点赞</button>';
                                    } else {
                                        html += '<button id="like" onclick="addlike()">点赞</button>';
                                    }
                                    html += '</div>';
                                } else {
                                    var html = "";
                                    html += '<div class="operating2">';
                                    if (isliked) {
                                        $(".right .content .info .isliked").text("您已点赞");
                                        html += '<button id="like" onclick="cancellike()">取消点赞</button>';
                                    } else {
                                        html += '<button id="like" onclick="addlike()">点赞</button>';
                                    }
                                    html += '</div>';
                                }
                                html += '<div class="inputComment">输入你想说的:<br>';
                                html += '<div class="commentText">'
                                html += '<textarea class="comment" type="comment" name="comment" id="comment"></textarea>';
                                html += '<div class = submit>'
                                html += '<button id="submit" onclick="addComment()">提交</button>';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';

                                $(".content").append(html);
                                if (localStorage.getItem("pre_content") != null) {
                                    $(".comment").text(localStorage.getItem("pre_content"));
                                    localStorage.removeItem("pre_content");
                                }
                            }
                        }
                    });

                }

            },
            error: function (err) {
                console.log(err);
                if (err != null && err.status == 401) {
                    alert("请先登录!");
                    location.href = "blog_login.html";
                }
            }
        });

        getCommentList();
        function getCommentList() {
            $.ajax({
                url: "/comment/getCommentList" + location.search,
                type: "get",
                success: function (result) {
                    if (result.code == 200) {
                        var showCounts = 5;
                        if (localStorage.getItem("show_comment_counts") != null) {
                            showCounts = localStorage.getItem("show_comment_counts");
                        }
                        var html = "";
                        var comments = result.data;
                        if (comments.length == 0) {
                            html += '<div class="noComment">现在还没有评论哦,快来抢沙发吧~</div>';
                        } else {
                            html += '<div class="commentSituation">最新评论:';
                            var count = 0;
                            var total = comments.length;
                            for (var comment of comments) {
                                html += '<div class="commentInfo">';
                                html += '<span>' + comment.updateTime + '  </span>';
                                html += '<span>' + comment.commenterName + ':  </span>';
                                html += '<span>' + comment.content + '</span>';
                                html += '</div>';
                                count++;
                                if (count == showCounts || count == total) {
                                    if (count < total) {
                                        html += '<div class="commentAdvice">下面还有些精彩评论等待被发现哦~';
                                        html += '</div>';
                                    }
                                    else if (count == total) {
                                        html += '<div class="commentAdvice">下面已经什么都没有了,快来发布更多评论吧~';
                                        html += '</div>';
                                    }
                                    break;
                                }
                            }
                            html += '</div>';
                            html += '<div class="showCommentCounts">';
                            html += '<span>您希望显示评论</span>'
                            html += '<input type="text" class="showCounts" name="showCounts" id="showCounts">'
                            html += '<span>条(至少1条,最多10条哦)</span>'
                            html += '<button id="submitShowCounts" onclick="saveShowCounts()">设置</button>';
                        }
                        $(".commentList").append(html);

                    }
                }
            });

        }

        function saveShowCounts() {
            var blogId = localStorage.getItem("blog_id");
            var showCounts = Number($(".showCounts").val());
            if (showCounts === parseInt(showCounts)) {
                if (showCounts < 1) {
                    alert("不要把评论都藏起来啦,重新输入吧");
                } else if (showCounts > 10) {
                    alert("显示不下这么多评论哦,点击详情查看吧");
                } else {
                    localStorage.setItem("show_comment_counts", showCounts);
                    alert("设置成功");
                }
                location.href = 'blog_detail.html?blogId=' + blogId + '';
            } else {
                alert("显示数量是一个整数哦,重新输入吧");
                location.href = 'blog_detail.html?blogId=' + blogId + '';
            }
        }



        function addComment() {
            var content = $(".comment").val();
            localStorage.setItem("pre_content", content);
            var isCommitComment = confirm("是否要提交评论");
            var blogId = localStorage.getItem("blog_id");
            console.log(content);
            if (content.length == 0) {
                alert("没人喜欢空空如也的评论哦,重新输入些什么吧");
                location.href = 'blog_detail.html?blogId=' + blogId + '';
            } else if (content.length > 50) {
                alert("输入的太多了哦,最多50个字,修改后再提交哦");
                location.href = 'blog_detail.html?blogId=' + blogId + '';
            } else {
                $.ajax({
                    url: "/comment/addComment",
                    type: "post",
                    data: {
                        blogId: localStorage.getItem("blog_id"),
                        content: content
                    },
                    success: function (result) {
                        if (result.code == 200 || result.data == true) {
                            alert("发表评论成功!");
                            localStorage.removeItem("pre_content");
                            location.href = 'blog_detail.html?blogId=' + blogId + '';
                        } else if (result.code == 1003) {
                            alert("发表评论已达上限,看看其他博客吧");
                            location.href = 'blog_detail.html?blogId=' + blogId + '';
                        }
                    }
                });
            }
        }



        var userUrl = "/user/getAuthorInfo" + location.search;
        getUserInfo(userUrl);

        function getAuthorArticleCounts(blog) {
            $.ajax({
                url: "/blog/getUserArticleCounts",
                type: "get",
                data: {
                    "userId": blog.userId
                },
                success: function (result) {
                    if (result.code == 200 && result.data != null) {
                        var count = result.data;
                        $(".left .card .articleCount").text(count);
                    }
                }
            });
        }

        function deleteBlog() {
            $.ajax({
                type: "post",
                url: "/blog/delete" + location.search,
                success: function (result) {
                    if (result != null && result.code == 200 && result.data) {
                        alert("删除博客成功");
                        location.href = "blog_list.html";
                    } else {
                        alert("删除博客失败");
                    }
                }
            });
        }

        function addlike() {
            $.ajax({
                url: "/blog/addLike" + location.search,
                type: "post",
                success: function (result) {
                    if (result.code == 200 && result.data != null) {
                        alert("点赞成功");
                        location.href = 'blog_detail.html?blogId=' + result.data + '';
                    }
                }
            });
        }

        function cancellike() {
            $.ajax({
                url: "/blog/cancelLike" + location.search,
                type: "post",
                success: function (result) {
                    if (result.code == 200 && result.data != null) {
                        alert("取消点赞成功");
                        location.href = 'blog_detail.html?blogId=' + result.data + '';
                    }
                }
            });
        }

        function logout() {
            var isLogOut = confirm("是否退出登录");
            if (isLogOut) {
                localStorage.removeItem("user_token");
                location.href = "blog_login.html";
            }
        }
    </script>
</body>

</html>